<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="card " v-if="Object.keys(detail).length > 0">
			<view class="hed auto">
				<image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/sub_sus.png"></image>
				<view class="ft1 mt-20">{{ "支付成功!" }}</view>
				<view class="ft c-99 mt-20" style="text-align: center;">{{ '可以在（我的订单-订单详情-支付记录）可查看' }}</view>
				<view class="mt-60 flex-center"><text class="ft ft-28 c-33">￥</text><text class="ft-num c-33"
						style="font-size: 68rpx;">{{ detail.pay_info.price }}</text></view>
			</view>
			<view class="info auto pd-20">
				<view class="flex-bwt">
					<text class="ft c-99">{{ "订单号" }}</text>
					<text class="ft c-33">{{ detail.order_info.ordernum }}</text>
				</view>
				<template v-if="detail.order_info.is_group==1">
					<view class="flex-bwt mt-20">
						<text class="ft c-99">{{ "拼团下单时间" }}</text>
						<text class="ft c-33">{{ detail.order_info.created_at }}</text>
					</view>
					<view class="flex-bwt mt-20">
						<text class="ft c-99">{{ "拼团成功时间" }}</text>
						<text class="ft c-33">{{ detail.order_info.group_success_time }}</text>
					</view>
				</template>
				<view class="flex-bwt mt-20" v-else>
					<text class="ft c-99">{{ "下单时间" }}</text>
					<text class="ft c-33">{{ detail.order_info.created_at }}</text>
				</view>
				<view class="flex-bwt mt-20">
					<text class="ft c-99">{{ "支付方式" }}</text>
					<text class="ft c-33">{{ '在线支付' }}</text>
				</view>
				<view class="flex-bwt mt-20">
					<text class="ft c-99">{{ "支付平台" }}</text>
					<text class="ft c-33">{{ '微信支付' }}</text>
				</view>
			</view>
		</view>
		<view style="height: 240rpx;"></view>
		<view class="bottom ">
			<view class="sle pd-20 flex-center">
				<view class="flex-center left" @click="goHome">
					<image class="wh-32 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/home.png"></image>
					<view class="ft fw-800">返回首页</view>
				</view>
				<view class="flex-center right">
					<image class="wh-32 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/info.png"></image>
					<view class="ft fw-800">联系客服</view>
				</view>
			</view>
			<view class="btn auto flex-center ft c-ff  mt-10" @click="goOrder(detail.pay_info.order_id)">查看订单</view>
		</view>
	</view>
</template>

<script setup lang="js">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		utils
	} from "@/utils/utils.js";
	import {
		api
	} from "@/utils/api.js";
	
	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '支付结果'
	})

	const order_id = ref("")
	const pay_id = ref("")
	const detail = ref({})
	onLoad((options) => {
		if (options.id || options.pay_id) {
			order_id.value = options.id ? options.id : '';
			pay_id.value = options.pay_id ? options.pay_id : '';
			utils
				.request(
					api.getOnlineOrderPayData, {
						order_id: order_id.value,
						pay_id: pay_id.value,
					},
					"get"
				)
				.then((res) => {
					detail.value = res.data.info;
				});
		}
	})

	const goHome = () => {
		uni.reLaunch({
			url: '/pages/index/index',
		})
	}
	const goOrder = (id) => {
		uni.navigateTo({
			url: "/subpackage/orderList/orderDetail?id="+id,
		});
	}
</script>

<style lang="scss" scoped>
	.card {
		.hed {
			box-sizing: border-box;
			padding: 60rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.img {
				width: 76rpx;
				height: 76rpx;
			}
		}

		.info {
			margin-top: 60rpx;
			width: 690rpx;
			// height: 540rpx;
			background: #F8F8F8;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

	}

	.bottom {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.sle {
			width: 750rpx;
			// height: 74rpx;
			background: #F8F8F8;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.left {
				box-sizing: border-box;
				padding-right: 60rpx;
				border-right: 2rpx solid #F8F8F8;
			}

			.right {
				box-sizing: border-box;
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 690rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>